v4.4.0

Compare Source

Added

• Field: Added autoresize prop to Field.Textarea for auto-resizing the textarea based on
  content.

Changed

• TreeView: Redesigned using the new tree collection for improved rendering and logic
  management. See the TreeView documentation
  for details.
• QrCode, SignaturePad, Timer: Promoted from preview to stable release.

Fixed

• Dialog: Fixed an issue where body styles weren't properly restored when preventScroll was
  enabled.
• Toast: Corrected type definitions in the createToaster function.
• FileUpload: Fixed an issue where image previews weren't updating when files were changed.

v4.3.0

Compare Source

Added

• Slider: Introduced Slider.DraggingIndicator for displaying an indicator when dragging a
  thumb.
• Field: Added Field.RequiredIndicator to show a required indicator (e.g., an asterisk) when
  the required prop is set.

<Field.Root required>
  <Field.Label>
    Username
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input placeholder="Enter your username" />
</Field.Root>

Fixed

• TagsInput: Resolved an issue where api.addTag(...) was not functioning correctly.
• RatingGroup: Fixed a bug where both the rating group and rating item received focus when
  readOnly was set to true.
• Combobox: Corrected behavior where getSelectionValue was called multiple times; it now
  triggers only when a selection is made.
• HoverCard: Removed preventDefault calls on the touchstart event to avoid browser error
  logs.
• Popover: Fixed a race condition in iOS Safari where switching between popovers caused them to
  close unexpectedly.
• Presence: Addressed an issue where elements using the presence machine did not exit the
  unmounting state if closed with a delay while switching tabs.

Changed

• Editable:
  • Added data-autoresize attribute to both editable and preview elements when autoResize is
    enabled.
  • Removed the default all: unset style from the input when autoResize is enabled, allowing for
    user-defined CSS.

v4.2.1

Compare Source

Changed

• Time Picker [Preview]: Updated value and defaultValue types from string to Time. Use
  the exported parseTime function to convert between strings and time objects.

Fixed

• TagsInput: Resolved an issue where tag navigation was unresponsive after removing tags with
  the delete key.
• DatePicker:
  • Fixed a bug where selecting a preset and then blurring the input incorrectly reset the value.
  • Fixed an issue where the MonthSelect sometimes defaulted to January.

v4.2.0

Compare Source

Added

• Introduced support for importing components via dedicated entry points. For instance, the Select
  can now be imported directly from @ark-ui/solid/select.

Fixed

• Fixed an issue where Field.Input was mistakenly read-only when rendered on the server.

v4.1.0

Compare Source

Added

• Toggle: Introduced the Toggle component.
• Dialog: Added support for detecting outside clicks from parent windows when rendered within an
  iframe.

Fixed

• Combobox: Fixed an issue where pressing Enter without selecting an option left text in the
  input.
• Dialog: Fixed an issue where the dialog closed when the positioner was scrollable, and the
  scrollbar was clicked.
• File Upload:
  • Fixed an issue where acceptedFiles were removed after an invalid file upload.
  • Fixed an issue in the preview image where createObjectURL was not cleaned up.

v4.0.0

Compare Source

In this major release, we shifted from primitive data types like strings to more structured types
such as Collection, Color, and DateValue. This enhanced flexibility and control by offering advanced
methods and properties.

The new APIs introduced helper functions like parseColor, parseDate, and createListCollection
to simplify working with the new types and make code more concise.

Changed

• ColorPicker [Breaking]: Updated value and defaultValue types from string to Color. Use
  the exported parseColor function to convert between strings and color objects.

  Before

  import { ColorPicker } from '@​ark-ui/solid'
  
  const Demo = () => {
    return <ColorPicker.Root defaultValue="#&#8203;000" />
  }

  After

  import { ColorPicker, parseColor } from '@​ark-ui/solid'
  
  const Demo = () => {
    return <ColorPicker.Root defaultValue={parseColor('#&#8203;000')} />
  }

  This change allows direct access to color object methods and properties.

• Select, Combobox [Breaking]: Removed the items, itemToString, and itemToValue props.
  Introduced a collection prop instead. Use the createListCollection helper to generate a
  collection from items.

  Before

  import { Select } from '@​ark-ui/solid'
  
  const Demo = () => {
    return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
  }

  After

  import { Select, createListCollection } from '@​ark-ui/solid'
  
  const collection = createListCollection({
    items: ['Option 1', 'Option 2', 'Option 3'],
  })
  
  const Demo = () => {
    return <Select.Root collection={collection} />
  }

• DatePicker [Breaking]: Changed value and defaultValue types from string to Date. To
  convert between strings and dates, use the parseDate function.

  Before

  import { DatePicker } from '@​ark-ui/solid'
  
  const Demo = () => {
    return <DatePicker.Root defaultValue="2024-01-01" />
  }

  After

  import { DatePicker, parseDate } from '@​ark-ui/solid'
  
  const Demo = () => {
    return <DatePicker.Root defaultValue={parseDate('2024-01-01')} />
  }

v3.13.0

Compare Source

Added

• FileUpload: Introduced a ClearTrigger for clearing file uploads.
• Switch, Checkbox, Radio Group: Added the data-focus-visible attribute for elements
  interacted with via keyboard.

Fixed

• FileUpload: Resolved an issue where directory: true was non-functional.

Changed

• Tooltip: Now only opens on keyboard focus, improving accessibility.

v3.12.1

Compare Source

Fixed

• DatePicker

  • Fixed issue where the year select dropdown doesn't respect min and max props.
  • Fixed issue where date picker throws when min or max is changed.

v3.12.0

Compare Source

Added

• Frame (Preview): Introduced the Frame component for rendering content within an iframe.
• Timer (Preview): Added Area and Control parts to improve structure and anatomy.

Fixed

• Combobox: Resolved an issue where the highlighted item remained persistent when the list of
  items was empty.

v3.11.0

Compare Source

Fixed

• Floating Components: Fixed issue where clicking outside of a dialog on mobile passed click
  events through.

• Popover: Fixed issue where popover did not restore focus when open state was changed
  programmatically

• Avatar: Fixed issue where avatar could throw when the fallback inner text changed

• Steps: Improved accessibility of tablist semantics by using aria-owns

Added

• FileUpload: Add support for more file types in file upload accept intellisense

• Toast: Add support for action property when creating toasts, giving you the ability to add a
  action.label and action.onClick. The onClick function will be called when the user clicks
  the action trigger.

toaster.create({
  title: 'Uploaded successfully',
  type: 'success',
  action: {
    label: 'Undo',
    onClick: () => {
      console.log('undo')
    },
  },
})

• File Upload: Added support for invalid prop in file upload to explicitly mark upload
  operation as invalid. This could be paired with the rejectedFiles to show an error message.

Changed

• Floating Components: Refactored boundary to only support function that returns an element.

• Select

  • Refactored opening and selection to be based on click events rather than pointerdown/up cycles.
  • Improved usability and accessibility of the select component.
  • Fixed issue where controlled multiple selects open state behaved unexpectedly.

v3.10.0

Compare Source

Fixed

• Steps: Fixed issue where steps context was not exported

Added

• Checkbox: Added invalid prop to Checkbox.Group

v3.9.0

Compare Source

Added

• Editable

  • Add support for controlled the editable's state (edit/preview) using edit and onEditChange

• Pagination

  • Expose api.count property

Changed

• Editable

  • Removed onEdit in favor of onEditChange
  • Removed startsWithEditView in favor of edit prop

Fixed

• Dialog

  • Fix issue where closing a nested dialog focuses the first focusable element in the parent dialog
    instead of the previously focused element.

• Steps: Fixed issue where the steps component was not exported in the index file.

v3.8.0

Compare Source

Added

• Steps (Preview): Added Steps component.

<Steps.Root count={1}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Indicator>1</Steps.Indicator>
        First
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Content index={0}>Content</Steps.Content>
  <Steps.CompletedContent>Completed</Steps.CompletedContent>

  <Steps.PrevTrigger>Back</Steps.PrevTrigger>
  <Steps.NextTrigger>Next</Steps.NextTrigger>
</Steps.Root>

• Timer (Preview): Added Timer component.

<Timer.Root>
  <Timer.Item type="days" />
  <Timer.Separator>:</Timer.Separator>
  <Timer.Item type="hours" />
  <Timer.Separator>:</Timer.Separator>
  <Timer.Item type="minutes" />
  <Timer.Separator>:</Timer.Separator>
  <Timer.Item type="seconds" />
</Timer.Root>

v3.7.0

Compare Source

Changed

• Progress: Update Progress.ValueText to render percentage as string.

Fixed

• Field:

  • Fixed issue where id of field parts could not be customized, breaking Zag.js composition.
  • Added data-* attributes to control part to allow for better styling.

• Select: Fixed reactivity issues when items and value are updated.

v3.6.2

Compare Source

Changed

• DatePicker: Added support for index in getLabelProps.

Fixed

• DatePicker:
  • Fixed issue where the selected date doesn't reflect in the input when clicking the trigger and
    then focusing the input.
  • Fixed SSR issue when using getPresetTrigger.
• Slider: Fixed issue where onValueChangeEnd was called with an incorrect value.
• Fixed an import issue with @internationalized/date.

v3.6.1

Compare Source

Changed

• Highlight: Exported HighlightChunk type to enhance type inference in userland code.

Fixed

• Select: Fixed HiddenSelect to correctly emit values when a simple string array is used as
  the value for the Select component.

v3.6.0

Compare Source

Added

• Fieldset Component: Introduced to help group form fields.

<Fieldset.Root>
  <Fieldset.Legend>Legend</Fieldset.Legend>
  <Fieldset.HelperText>Helper text</Fieldset.HelperText>
  <Fieldset.ErrorText>Error text</Fieldset.ErrorText>
</Fieldset.Root>

Learn more in the documentation.

• Highlight Component: Added to highlight text based on a query.

import { Highlight } from '@​ark-ui/solid'

export const App = () => (
  <Highlight
    query={['Ark UI', 'exclusive examples']}
    text="Unlock exclusive examples and support the development by getting Ark UI Plus."
  />
)

• Tooltip: Added closeOnClick to control tooltip closure on trigger click.

Changed

• Toast: Exported CreateToasterReturn type to improve type inference.
• Combobox: Enhanced accessibility by removing unnecessary aria-selected and aria-disabled
  attributes.

Fixed

• Toast: Added missing aria-labelledby and aria-describedby attributes on the root element.
• Combobox: Fixed issue where the input didn't update on selection with a pointer.
• RadioGroup: Corrected misspelt data-readonly attribute.
• Select: Enabled customization of closeOnSelect when multiple is true.
• Tags Input:
  • Fixed issues with repeat pasting and undo.
  • Addressed problem where deleting a pasted value disabled further pasting.
  • Ensured values are always unique by discarding duplicates

v3.5.0

Compare Source

• All Components: Exported each component's anatomy. For example:

  import { avatarAnatomy } from '@​ark-ui/solid'

• NumberInput: Introduced the ValueText part to render the internal state value.

Fixed

• TreeView: Resolved an issue preventing input usage within the tree.
• Progress: Fixed a warning in Circle due to an incorrect viewBox attribute on the <svg>
  element.
• Carousel: Corrected looping behavior for next and previous buttons when both slidesPerView
  and loop are set.
• Menu: Fixed loss of position data in the context menu upon closing.

v3.4.1

Compare Source

Changed

• Checkbox: Added the name prop to Checkbox.Group for setting checkbox names within the
  group.

Fixed

• Combobox, Select: Fixed an issue where it throws an error when items are reactive.

v3.4.0

Compare Source

Added

• Field: Introduced the Field component for flexible form input, label, and helper text
  container.
• All Components: Exposed base props to simplify prop merging for library consumers, especially
  in CSS-in-JS environments.

  export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
  export interface AccordionItemProps extends HTMLProps<'div'>, AccordionItemBaseProps {}

• ColorPicker: Added SliderValueText, SliderLabel, and ValueSwatch parts for enhanced
  customization.
• Tooltip: Added closeOnScroll option to control whether the tooltip should close when the
  trigger's overflow parent scrolls.
• Signature Pad: Introduced HiddenInput to the SignaturePad component for better form
  library compatibility.

Fixed

• Menu:
  • Fixed an issue causing sibling menus or popovers to malfunction on iOS devices.
  • Resolved the problem where the context menu trigger showed the magnifier and iOS context menu on
    long press.
  • Fixed an issue where RadioOptionItem did not provide the checked state in context.
• Editable: Fixed a bug where setting activationMode to dblclick unexpectedly cleared the
  input value.
• Checkbox: Added the missing group role for the Checkbox group component.
• RootProvider: Added the missing RootProvider for the ColorPicker, NumberInput,
  RatingGroup, SegmentGroup, and ToggleGroup components.

v3.3.0

Compare Source

Added

• Signature Pad: Introduced the SignaturePad component for capturing signatures.
• QR Code: Added the QRCode component for generating QR codes.
• CheckboxGroup: Added the CheckboxGroup component for managing multiple checkboxes.
• Presence: Added support for immediate to synchronize presence changes immediately instead of
  deferring to the next tick.

Fixed

• TreeView: Resolved an issue where the tree view state could be updated after setting
  defaultSelectedValue or defaultExpandedValue.
• Tabs: Resolved an issue where rapidly changing the selected tab could briefly show previous
  tab content.
• FileUpload: Fixed an issue where the onFileAccept event was triggered when deleting an item
  via the delete trigger.
• Select: Exported the missing SelectList component.

v3.2.2

Compare Source

Fixed

• Combobox: Exported missing ComboboxList component.
• Toast: Resolved an issue where ToastRoot doesn't merge its incoming props correctly.

v3.2.1

Compare Source

Fixed

• Resolved an issue where the component context could be undefined in some components.

v3.2.0

Compare Source

Added

• All Components: Introduced the Provider component for easier access to internal machine
  APIs, improving component composition. See the example below:

import { Avatar, useAvatar } from '@​ark-ui/solid'

export const Example = () => {
  const avatar = useAvatar({
    onStatusChange: (e) => console.log('status changed', e),
  })

  return (
    <Avatar.RootProvider value={avatar}>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.RootProvider>
  )
}

v3.1.0

Compare Source

Added

• Editable: Supported textarea as the input element in edit mode.

Fixed

• Fixed an issue where spreading readOnly: false adds the readonly attribute on editable
  elements, making them uneditable.

• Factory: Fixed an issue where the ark factory was incorretly adding the parent ref to the
  child component.

• Select: Fixed an issue where changing the label of a collection item did not trigger a change
  event.

• Popover:

  • Implemented autoFocus to determine whether the popover should autofocus on open:
    • When true, the first focusable element or the content is focused.
    • When false, the content is focused.
  • Fixed an issue where the page scroll resets on opening the popover.

• DatePicker: Fixed an issue in range mode where calendar close unexpectedly when hovering on a
  day quickly.

v3.0.2

Compare Source

Changed

• Avatar: Improved image load check by using naturalWidth and naturalHeight instead of
  currentSrc.

v3.0.1

Compare Source

Fixed

• Added missing export for HiddenInput in Slider.
• Added missing export for ItemHiddenInput in RadioGroup and SegmentGroup.

v3.0.0

Compare Source

Highlights

The 3.0 release brings significant enhancements and some breaking changes for a more streamlined and
flexible API. Key updates include new components and types, improved form integration, and enhanced
forward compatibility. Here are some highlights:

Added

• Context Components: Introduced the Context component for easier access to internal machine
  APIs, improving component composition. See the example below:

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(popover) => (
          <Popover.Content>
            <Popover.Title onClick={() => popover().setOpen(false)}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
)

• Format: Added a Format component for formatting bytes and numbers.

<Format.Byte value={120904} unit="byte" unitDisplay="short" />
<Format.Number value={1204} unit="centimeter" />

• Tooltip: Added defaultOpen prop for cases where you do not need to control its open state.
• Types: Exported Assign and Optional types to enhance type handling.
• Toast: Added support for overlapping and stacked toast.

Changed

• [BREAKING]: Exposed hidden inputs in Checkbox, ColorPicker, FileUpload, PinInput,
  RadioGroup, RatingGroup, SegmentGroup, Select, Slider, Switch, and TagsInput for
  better form library compatibility. Please ensure to include the hidden input in your component
  like shown below:

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput /> // [!code highlight]
</Checkbox.Root>

• [BREAKING]: Made id optional and removed for from ItemGroupLabel in Combobox and
  Select for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel for="framework">Frameworks</Combobox.ItemGroupLabel>
+ <Combobox.ItemGroup>
+   <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>

• [BREAKING] Popover, Tooltip: Renamed closeOnEsc to closeOnEscape to be consistent with
  dialog machine.
• [BREAKING] Combobox, Menu, Select, Tabs, ToggleGroup: Renamed loop to focusLopp to be more
  descriptive.
• [BREAKING]: Renamed Environment to EnvironmentProvider to align with other providers.
• Refined the as prop implementation for improved type merging and performance.

// before
<Button as={Dialog.Trigger} variant="solid" size="sm">
  Open Dialog
</Button>

// after
<Dialog.Trigger asChild={(props) => <Button {...props()} />}>
  Open Dialog
</Dialog.Trigger>

Fixed

• DatePicker: Resolved issues with min and max props not supporting date strings.
• Accordion: Fixed initial flicker of content.
• TagsInput: Replaced HTMLInputElement with HTMLDivElement in TagsInput.Root.
• Select, Combobox: Fixed an issue with reactivity.
• Toast: Resolved an issue with Toast not updating its toasts and count properties when
  creating one or more toasts.
• ColorPicker: Added missing HTMLArkProps<'div'> to ColorPicker.View.

Removed

• [BREAKING]: Dropped direct internal API access from Root components. Use the new Context
  component for more flexible and cleaner API integration.
• [BREAKING]: Simplified component APIs by removing dir and getRootNode attributes. Use
  LocaleProvider and
  EnvironmentProvider for these settings.